<template>
  <div style="background-color: #eeeeee">
    <div style="display: flex;justify-content: space-around">
      <div style="display: flex;flex-direction: column;padding: 10px 0" v-for="(item,index) in titleList" :key="index">
        <div style="text-align: center;font-size: 20px">{{item.name}}</div>
        <div style="display: flex;" >
          <div style="padding: 5px;" v-for="(text,i) in item.text" :key="i">
            <Tag :color="text.color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Tag>
            {{text.value}}
          </div>
        </div>
      </div>
    </div>
    <a-table :dataSource="colorList" :columns="columns" bordered>
      <template #gb1="{text}">
        <div class="flex justify-between items-center" :style="{backgroundColor:text.colorState == '1'?'#ffa500':text.colorState == '0'?'#00acc5':'#fcfc74'}" style="padding: 8px 12px;border-radius: 10px;">
          <div>盘头小时：</div>{{ text.colorState }}小时
        </div>
        <div class="flex justify-between items-center" style="padding: 10px 12px 0 12px;">
          <div>送纱量（实际|理论）</div>
          <div>{{text.practical}} | {{text.theory}}</div>
        </div>
      </template>
      <template #gb2="{text}">
        <div class="flex justify-between items-center" :style="{backgroundColor:text.colorState == '1'?'#ffa500':text.colorState == '0'?'#00acc5':'#fcfc74'}" style="padding: 8px 12px;border-radius: 10px;">
          <div>盘头小时：</div>{{ text.colorState }}小时
        </div>
        <div class="flex justify-between items-center" style="padding: 10px 12px 0 12px;">
          <div>送纱量（实际|理论）</div>
          <div>{{text.practical}} | {{text.theory}}</div>
        </div>
      </template>
      <template #gb3="{text}">
        <div class="flex justify-between items-center" :style="{backgroundColor:text.colorState == '1'?'#ffa500':text.colorState == '0'?'#00acc5':'#fcfc74'}" style="padding: 8px 12px;border-radius: 10px;">
          <div>盘头小时：</div>{{ text.colorState }}小时
        </div>
        <div class="flex justify-between items-center" style="padding: 10px 12px 0 12px;">
          <div>送纱量（实际|理论）</div>
          <div>{{text.practical}} | {{text.theory}}</div>
        </div>
      </template>
      <template #gb4="{text}">
        <div class="flex justify-between items-center" :style="{backgroundColor:text.colorState == '1'?'#ffa500':text.colorState == '0'?'#00acc5':'#fcfc74'}" style="padding: 8px 12px;border-radius: 10px;">
          <div>盘头小时：</div>{{ text.colorState }}小时
        </div>
        <div class="flex justify-between items-center" style="padding: 10px 12px 0 12px;">
          <div>送纱量（实际|理论）</div>
          <div>{{text.practical}} | {{text.theory}}</div>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {Tag} from "ant-design-vue";

const titleList = ref([
    {name: "盘头余时颜色说明", text:[{color: '#ffa500', value: "盘头余时将在当天白班结束"},{color: '#00acc5', value: "盘头余时将在当天晚班结束"}]},
    {name: "送纱量颜色说明", text: [{color: '#fcfc74',value:"送纱量实时值和理论值相差超过15，且实时值不为0"}]}
])

// 传入显示行
const columns = [
  { title: '机台号', width:70, dataIndex: 'jt', align: 'center', key: 'jt'},
  { title: '密度(实际|理论)', width:70, dataIndex: 'density', align: 'center', key: 'density'},
  { title: 'GB1', dataIndex: 'gb1', align: 'center', key: 'gb1',slots: { customRender: 'gb1' }},
  { title: 'GB2', dataIndex: 'gb2', align: 'center', key: 'gb2',slots: { customRender: 'gb2' }},
  { title: 'GB3', dataIndex: 'gb3', align: 'center', key: 'gb3',slots: { customRender: 'gb3' }},
  { title: 'GB4', dataIndex: 'gb4', align: 'center', key: 'gb4',slots: { customRender: 'gb4' }}
];
const colorList = ref([
  {key: 'X5ADC1axa7c',jt:'JD001',density:'5|10',
    gb1:{practical:"5",theory:"10",state:"1",colorState: '1',},
    gb2:{practical:"6",theory:"10",state:"1",colorState: '1'},
    gb3:{practical:"7",theory:"10",state:"1",colorState: '2'},
    gb4:{practical:"8",theory:"10",state:"0",colorState: '1'},
  },
  {key: 'X5aHsc1axa7c',jt:'JD002',density:'8|10',
    gb1:{practical:"5",theory:"10",state:"0",colorState: '1'},
    gb2:{practical:"6",theory:"10",state:"1",colorState: '1'},
    gb3:{practical:"7",theory:"10",state:"1",colorState: '1'},
    gb4:{practical:"8",theory:"10",state:"1",colorState: '1'},
  },
  {key: 'X5aHs1azfCa7c',jt:'JD003',density:'6|10',
    gb1:{practical:"4",theory:"10",state:"1",colorState: '1'},
    gb2:{practical:"4",theory:"10",state:"1",colorState: '1'},
    gb3:{practical:"6",theory:"10",state:"1",colorState: '0'},
    gb4:{practical:"6",theory:"10",state:"1",colorState: '1'},
  }
])
</script>
<style>
  .ant-tag{
    border-radius:none;
  }
</style>
